Learn to code a mobile responsive personal portfolio website using Next.js, Three.js & Tailwind CSS.
Course developed by @CodeBucks
🔗 Demo Link:
💻 Starter Code:
💻 Final Code:
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + Demo
⌨️ (0:06:02) Setup and Installation
⌨️ (0:08:11) Layout.js file and Tailwind config
⌨️ (0:11:53) Home page
⌨️ (0:13:21) Generate Images using Playground AI
⌨️ (0:16:56) 3D model configuration and Rendering
⌨️ (0:37:13) Navigation buttons
⌨️ (1:07:53) Creating background firefly effect
⌨️ (1:20:07) Projects page
⌨️ (1:32:46) Subpages layout
⌨️ (1:40:08) About page
⌨️ (1:55:48) Github stats & Skill icons
⌨️ (2:10:48) Contact page
⌨️ (2:20:06) Using Emailjs
⌨️ (2:35:27) Show toast messages
⌨️ (2:41:23) Mobile responsive
⌨️ (3:10:16) Adding animations using framer-motion
⌨️ (3:23:57) Adding music
⌨️ (3:49:21) Optimizing Images and performance
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
|
Download your free Python Cheat Sheet he...
How do you avoid the risk of running a P...
Six times in fifteen years, Amazon Web S...
Download your free Python Cheat Sheet he...
In this video, we build an AI-powered se...
Ever wished a website or your browser wo...
Prepare your website for the next genera...
Explore the power of Chrome's built-in A...
Take a guided tour of Chrome's modern we...
Natalia Markoborodova and Yu Tsuno, shar...
Hear from Matthias Rohmer how the MCP se...
Download your free Python Cheat Sheet he...
Rob Orgiu shares how to harness Jetpack ...
Watch Paul Lammertsma and Garan Jenkin t...
Did you know that adding XR-differentiat...